@import '../color/colors';

$cdn: '//files.pengxiaotian.com';

// Common
:root {
  --datav-font-color: #bcc9d4;
  --datav-font-color-disabled: #424447;
  --datav-main-color: #2681ff;
  --datav-error-color: #f43;
  --datav-red-color: #f15532;
  --datav-warn-color: #f27a24;
  --datav-gray-color: #90a0ae;
  --datav-dark-color: #262c33;
  --datav-main-hover-color: #409fff;
  --datav-main-click-color: #2681ff;
  --datav-pop-bg-color: #1b3964;
  --datav-slider-color: #74f0ff;
  --datav-success-color: #50e3c2;
  // --datav-cp-bg-color: #13161a;
  // --datav-cp-header-height: 40px;
  // --datav-cp-header-font-size: 14px;
  --datav-ft-border: 1px solid #3a4659;
  // --datav-cp-border: 1px solid #2c2e33;
  // --datav-loading-color: #1996df;
  // --datav-input-bg: #262c33;
  // --datav-nav-bg: #13161a;
  // --datav-nav-active-bg: #1d2126;
  // --datav-nav-hover-bg: #21262b;
  --datav-left-nav-bg: #191c21;
  // --datav-left-nav-hover-bg: transparent;
  --datav-left-nav-active-bg: #14161a;
  // --datav-border-color: #5c6066;
  // --datav-cb-bg: transparent;
  // --datav-cb-bg-hover: rgba(38, 129, 255, 0.3);
  // --datav-cb-bg-disabled: rgba(58, 70, 89, 0.3);
  // --datav-cb-color: #3a4659;
  // --datav-cb-color-disabled: #424447;
  // --datav-cb-border: 1px solid #3a4659;
  // --datav-cb-border-color-active: 1px solid #3a4659;
  // --datav-cp-shadow: 0 0 1px 1px #0b0c0d;
  // --datav-sw-bg: #303740;
  // --datav-common-outline: 1px solid #0b0c0d;
  // --datav-common-outline-hover: 1px solid var(--datav-main-color);
  // --datav-common-outline-focus: 1px solid var(--datav-main-color);
  // --datav-common-outline-disabled: 1px solid #323437;
  --datav-body-bg: #171b22;
  --datav-bgcolor-1: #0b0c0d;
  --datav-bgcolor-2: #1d262e;
  --datav-component-bg: #303640;
  --datav-border-color: #3a4659;
  --datav-border: 1px solid var(--datav-border-color);
  --datav-border-primary: 1px solid var(--datav-main-color);
  --datav-border-dark: 1px solid #000;
  --datav-outline: 1px solid #0b0c0d;
  --datav-shadow-color: #000;
  --datav-shadow: 0 0 10px -6px #000;
  --datav-menu-bg: #27343e;
  --datav-menu-bg-hover: var(--datav-bgcolor-2);
  --datav-menu-color-hover: #00baff;
  --datav-menu-color-disabled: #576369;
  --datav-layer-wp-bg: #1d2126;
  --datav-layer-bg: #2e343c;
  --datav-layer-bg-dark: #0a0b0d;
  --datav-layer-item-bg: #1b1f25;
  --datav-layer-item-color-locked: #576369;
  --datav-layer-item-thumbail-bg: #282a30;
  --datav-layer-toolbar-bg: #20242a;
  --datav-layer-toolbar-bg-hover: #3a4650;
  --datav-layer-toolbar-border: 1px solid #282f3a;
  --datav-layer-toolbar-icon-color: #282f3a;
  --datav-layer-input-bg: #363c48;
}

// GUI
/* stylelint-disable no-duplicate-selectors */
:root {
  --datav-gui-primary-color: #2483ff;
  --datav-gui-error-color: #ff4f43;
  --datav-gui-hover-color: #26a5ff;
  --datav-gui-active-color: #2693ff;
  --datav-gui-disabled-color: #424447;
  // --datav-gui-background-color-front: hsl(215, 15%, 13%); // #1c2026
  // --datav-gui-background-color-front-lighter: hsl(215, 15%, 28%); // #3d4652
  // --datav-gui-background-color-back: hsl(215, 15%, 8%); // #111417
  // --datav-gui-background-color-back-darker: hsl(0, 0%, 0%); // #000
  // --datav-gui-background-hover-color: #1b3964;
  // --datav-gui-component-background-color: #262c33;
  // --datav-gui-component-background-color-darker: #262c33;
  // --datav-gui-component-background-hover-color: #303640;
  // --datav-gui-component-background-active-color: #262b33;
  // --datav-gui-component-background-disabled-color: #13161a;
  --datav-gui-font-color-base: #a1aeb3;
  // --datav-gui-font-color-1: #fff;
  // --datav-gui-font-color-2: #c3d3d9;
  // --datav-gui-font-color-3: #737c80;
  // --datav-gui-font-color-description: #5c6366;
  // --datav-gui-font-color-disabled: #424447;
  // --datav-gui-border-color: rgba(52, 52, 52, 0.5);
  // --datav-gui-component-border-color: #0b0c0d;
  // --datav-gui-cover-color: rgba(0, 0, 0, 0.75);
  // --datav-gui-component-slider-track-color: linear-gradient(to right, #74f0ff, #2681ff);
  // --datav-gui-disabled-opacity: 0.5;
  // --datav-gui-popover-shadow: 0 0 4px #000;
  // --datav-gui-logo-color: rgba(255, 255, 255, 0.25);
  // --datav-gui-font-size-base: 12px;
  // --datav-gui-icon-size-md: 14px;
  // --datav-gui-component-border: 1px solid var(--datav-gui-component-border-color);
  // --datav-gui-transition-time: 0.3s;
  // --datav-gui-transition-easing: ease-in-out;
  // --datav-gui-slider-handle-bg: #fff;
  // --datav-gui-padding-border-color: #737c80;
  // --datav-gui-field-show-hide-bg: #6d7278;
  // --datav-gui-field-padding-right: 8px;
  // --datav-gui-field-padding-top: 4px;
  // --datav-gui-field-padding-bottom: 4px;
  // --datav-gui-field-padding-left-level-1: 8px;
  // --datav-gui-field-padding-left-level-2: 8px;
  // --datav-gui-field-padding-left-level-3: 8px;
  // --datav-gui-field-padding-left-level-4: 8px;
  // --datav-gui-field-padding-left-level-5: 24px;
  // --datav-gui-collection-padding-left-level-0: 0;
  // --datav-gui-collection-padding-left-level-1: 8px;
  // --datav-gui-collection-padding-left-level-2: 8px;
  // --datav-gui-collection-padding-left-level-3: 8px;
  // --datav-gui-collection-padding-left-level-4: 24px;
  // --datav-gui-component-container-width: 192px;
  // --datav-gui-component-height: 24px;
  // --datav-gui-menu-item-height: 36px;
  // --datav-gui-with-icon-width: 83px;
  // --datav-gui-image-content-height: 120px;
  // --datav-gui-image-select-input-height: 68px;
  // --datav-gui-image-select-image-content-height: 78px;
  // --datav-gui-image-select-image-height: 54px;
  // --datav-gui-input-padding: 7px;
}

$color-white: #fff;
$color-black: #000;
$color-gray: #90a0ae;
$color-dark: #262c33;
$color-red: #f15532;

$color-primary: $blue-6;
$color-success: $green-6;
$color-warning: $warn-6;
$color-error: $red-6;
$color-info: $color-gray;

// Base
$font-color: #bcc9d4;
$font-color-placeholder: #c0c4cc;
$font-color-disabled: #424447;
$font-size: 12px;
$header-font-size: $font-size;
$hover-color: #409fff;
$nav-color: #b9c2cc;
$nav-border-color: #27343e;

// Background
$background-color: #171b22;
$background-color-dark: #1d262e;
$background-color-secondary: #303640;

// Border
$border-color: #3a4659;
$border: 1px solid $border-color;
$border-outline: 1px solid #0b0c0d;
$border-dark: 1px solid #000;
$border-primary: 1px solid $color-primary;

// Shadow
$shadow-color: #000;
$shadow: 0 0 10px -6px $shadow-color;
$shadow-secondary: 0 0 8px -4px $shadow-color;

// Input
$input-color-hover: $color-primary;
$input-font-color: $font-color;
$input-description-font-color: #5c6366;
$input-prepend-bgcolor: #39414d;
$input-border-color: #0b0c0d;
$input-border-disabled: 1px solid #323437;
$input-bgcolor: $color-dark;
$input-bgcolor-disabled: $color-dark;

// Checkbox
$checkbox-border-color-checked: $color-primary;

// Scrollbar
$scrollbar-thumb-color: #434b55;
$scrollbar-thumb-width: 4px;
$scrollbar-thumb-height: 4px;

// tooltip-popover
$tooltip-popover-color: #fff;
$tooltip-popover-bgcolor: #1b3964;
$tooltip-popover-shadow-color: #000;

// Popover
$popover-bgcolor: #303640;
$popover-bgcolor-dark: $color-dark;

// Icon
$icon-color: $color-white;

// Message
$message-font-color: #fff;
$message-bgcolor-success: #1b3964;
$message-bgcolor-warning: #593c27;
$message-bgcolor-error: #5d2b3e;
$message-border-color-success: $color-primary;
$message-border-color-warning: $color-warning;
$message-border-color-error: $color-red;

// Slider
$slider-color: #74f0ff;
$slider-runway-color: #bcc9d4;
$slider-track-color: linear-gradient(to right, $slider-color, $color-primary);

// Button
$button-font-color: $color-white;
$button-shade-percent-active: 10% !default;
$button-font-color-disabled: rgba(255, 255, 255, 0.5);
$button-border-color-disabled: #323437;
$button-bgcolor-disabled: #262c33;

// Loading
$loading-color: #1996df;

// Switch
$switch-height: 28px;
$switch-bgcolor: #0b0c0d;
$switch-border-color: #303740;

// Select
$select-font-color: #a1aeb3;
$select-bgcolor: #111417;
$select-option-bgcolor: #1d2126;
$select-option-bgcolor-hover: #1b3964;
$select-color-selected: #fff;

// Tabs
$tabs-font-color: $font-color;
$tabs-bgcolor-active: #14161a;
$tabs-nav-bgcolor: #191c21;
$tabs-nav-bgcolor-hover: #21262b;
$tabs-bar-bgcolor-active: $color-primary;
$tabs-content-bgcolor: #13161a;
$datav-tabs-nav-bgcolor: #13161a;
$datav-tabs-nav-bgcolor-active: #1d2126;

// Collapse
$collapse-font-color: $font-color;
$collapse-bgcolor: #13161a;
$collapse-border-color: #141210;

// Drawer
$drawer-bgcolor: #1d2126;
$drawer-title-color: $color-primary;

// MonacoEditor
$monaco-border-color: #282f3a;
$monaco-suggest-color: #d4d4d4;
$monaco-bgcolor-readonly: #1f2329;
$monaco-fullscreen-dialog-bgcolor: #222425;
$monaco-action-color: #bfbfbf;

/* Editor
-------------------------- */
// Header
$header-color: #a1aeb3;
$header-icon-color: #fff;
$header-bgcolor: #1d1e1f;
$header-btn-bgcolor: #303640;
$header-btn-bgcolor-hover: #414750;

// Layer
$panel-bgcolor: #1d2126;
$panel-font-color: $font-color;
$panel-img-border-color: #37bfff;
$panel-bgcolor-dark: #0a0b0d;

$layer-bgcolor: #2e343c;
$layer-font-color: #fff;
$layer-toolbar-bgcolor: #20242a;
$layer-toolbar-bgcolor-hover: #3a4650;
$layer-toolbar-icon-color: #282f3a;
$layer-toolbar-border: 1px solid #282f3a;
$layer-manager-bgcolor: #1b1f25;
$layer-manager-bgcolor-hide: #1c1f25;
$layer-manager-color-hide: #576369;
$layer-thumbail-bgcolor: #282a30;
$layer-input-bgcolor: #363c48;

$config-panel-bgcolor: #1c1f25;
$config-manager-bgcolor: #191c21;
$config-panel-border: 1px solid #282f3a;
$config-status-color: $loading-color;
$config-dot-list-bgcolor: #4c5768;
$config-dot-bgcolor: #7d8081;

$page-config-font-color: #fff;
$page-config-bgcolor: #1c2026;
$page-config-bgcolor-secondary: #262c33;

// ContextMenu
$context-menu-font-color: $font-color;
$context-menu-color-hover: #00baff;
$context-menu-color-disable: #576369;
$context-menu-bgcolor: #27343e;
$context-menu-bgcolor-hover: #1d262e;
$context-menu-divider-bgcolor: #3a4659;

// Footer
$footer-bgcolor: #222528;
$footer-color: $font-color;
$footer-shortcut-color: #08a1db;
$footer-shortcut-color-hover: #0b0c0d;
$footer-shortcut-bgcolor: #262b33;

/* Editor End
-------------------------- */

// State
$state-color: #576369;

// DataV GUI
$gui-font-size: 12px;
$gui-font-color: #a1aeb3;
$gui-font-color-1: #fff;
$gui-font-color-2: #c3d3d9;
$gui-font-color-3: #737c80;
$gui-primary-color: #2483ff;
$gui-hover-color: #26a5ff;
$gui-error-color: #ff4f43;
$gui-active-color: #2693ff;
$gui-disabled-color: #424447;
$gui-component-bgcolor: $color-dark;
$gui-component-bgcolor-hover: $background-color-secondary;
$gui-component-border-color: #0b0c0d;
$gui-cover-color: rgba(0, 0, 0, 0.75);
$gui-bgcolor-dark: #111417;

$field-height: 28px;
$field-help-color: #a1aeb3;
$field-container-width: 192px;
$field-collapse-header-bgcolor: #1c2026;
$field-collapse-arrow-color: #a1aeb3;
$field-collapse-item-bgcolor: #111417;
$field-border-color: rgba(52, 52, 52, 0.5);

$ruler-bg: #0e1013;
$ruler-tag-bg: rgba(64, 116, 180, 1);
$ruler-line-bg: rgba(0, 173, 255, 0.84);
$ruler-mark-color: #3a4659;
$ruler-font-color: rgba(161, 174, 179, 0.8);

$datav-data-form-bgcolor: #0e1013;
$datav-data-filter-color: #566273;
$datav-data-filter-border: 1px solid #566273;
